<template>
  <div class='chart-container'>
    <div :class="['chart', bgClass]" :style="{ width: width + 'px', height: height + 'px' }">
      <ResponsiveBarChart :options="chartOptions" @bar-clicked="onBarClicked" />
      <div class="text">{{ text }}</div>
    </div>
  </div>
</template>

<script>
import ResponsiveBarChart from '@/components/echarts/ResponsiveBarChart.vue';
export default {
  name: 'LevelRing',
  props: {
    width: {
      type: Number,
      default: 100
    },
    height: {
      type: Number,
      default: 100
    },
    // background: {
    //   type: String,
    //   default: require('@/assets/images/big_screeen/level1.png')
    // },
    bgClass: {
      type: String,
      default: 'level1'
    },
    text: {
      type: String,
      default: ''
    },
    total: {
      type: Number,
      default: 1
    },
    curValue: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      colors: ['#FF3838', '#FF6A3A', '#FFD03B', '#66E1DF'],
      chartOptions: {}
    };
  },
  computed: {},
  watch: {
    curValue: {
      handler() {
        this.getOption()
      },
      immediate: true
    }
  },
  created() {
    this.getOption()
  },
  mounted() {
  },
  methods: {
    onBarClicked() { },
    getOption() {
      this.chartOptions = {
        title: {
          text: this.curValue,
          top: '36%',
          left: 'center',
          textStyle: {
            lineHeight: 20,
            fontSize: 14,
            color: 'white'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['60%', '70%'],
            center: ['54%', 'center'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            silent: true,
            startAngle: 180,
            data: [
              {
                value: this.curValue,
                // name: 'Search Engine',
                itemStyle: {
                  color: this.total == 0 ? 'transparent' : this.colors[this.bgClass.split("level")[1] - 1]
                },
              },
              this.total == 0 ? undefined : {
                value: this.total - this.curValue,
                name: 'none',
                itemStyle: {
                  color: 'transparent'
                },
                silent: false
              }
            ]
          }
        ]
      };

    }
  },
  components: {
    ResponsiveBarChart
  },
}
</script>

<style lang='less' scoped>
.chart {
  // background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 16% 50%;
}

.level1 {
  background-image: url('@/assets/images/big_screeen/level1.png');
}

.level2 {
  background-image: url('@/assets/images/big_screeen/level2.png');
}

.level3 {
  background-image: url('@/assets/images/big_screeen/level3.png');
}

.level4 {
  background-image: url('@/assets/images/big_screeen/level4.png');
}

.text {
  font-size: 14px;
  text-align: center;
}
</style>